<template>
 <!-- 分页器组件 -->
    <div class="pagination">
   
        <button @click="beforePage">上一页</button>
        <button v-if="startAndEndNum.start != 1" @click="goToPageNo">1</button>
        <button v-if="startAndEndNum.start > 2">···</button>

        <!-- 中间部分 -->
       <button v-for="(page,index) in startAndEndNum.showArr" :key="index"  @click="goToPageNo" :class="{active:pageNo == page}">{{page}}</button>

        <button v-if="startAndEndNum.end < (totalPage-1)">···</button>
        <button v-if="startAndEndNum.end != totalPage"  @click="goToPageNo">{{totalPage}}</button>
        <button @click="nextPage">下一页</button>
        <button style="margin-left: 20px">共 {{total}} 条记录</button> 
    </div>
</template>

<script>
    export default {
        name: "Pagination",
        props:['pageNo','pageSize','total','continues'],
        computed:{
            // 总共多少页
            totalPage(){
                // 向上取值
                return Math.ceil(this.total/this.pageSize);            
            },
             // 计算连续页码的起始数字与结束数字
            startAndEndNum(){
                const {continues,pageNo,totalPage} = this;
                let start = 0,end = 0;
                let showArr = [];
                // 如果总页数没有连续页码数多
                if(continues > totalPage){
                    start = 1;
                    end = totalPage;
                }else{
                    // 正常情况下
                    start = pageNo - parseInt(continues/2);
                    end = pageNo + parseInt(continues/2);
                    if(start < 1){
                        start = 1;
                        end = continues;
                    }
                    if(end > totalPage){
                        end = totalPage;
                        start = (totalPage - continues) + 1;
                    }
                }
            
            for(let i = start ; i <= end ; i++){
                showArr.push(i);
            }
            return {start,end,showArr}
            }
        },
        methods: {
            // 跳转到指定页码
            goToPageNo(e){
                this.$emit('getPageNo',parseInt(e.target.innerHTML));
            },
            // 点击下一页回调
            nextPage(){
                if(this.pageNo<this.totalPage){
                this.$emit('getPageNo',parseInt(this.pageNo)+1);
                }
                else{
                    this.$alert('已经是最后一页了！', '提示', {
                    confirmButtonText: '确定',
                });
                }
           },
            // 点击上一页回调  
            beforePage(){
                if(this.pageNo>1){
                     this.$emit('getPageNo',parseInt(this.pageNo)-1);
                }else{
                    this.$alert('已经是第一页了！', '提示', {
                    confirmButtonText: '确定',
                });
                }
            }
        },
    }
</script>

<style lang="less" scoped>
    .pagination {
        text-align: left;
        margin: 20px 0px;

        text-align: center;
        button {
            margin: 0 5px;
            background-color: #e3edef;
            color: #606266;
            outline: none;
            border-radius: 2px;
            padding: 0 4px;
            vertical-align: top;
            display: inline-block;
            font-size: 13px;
            min-width: 35.5px;
            height: 28px;
            line-height: 28px;
            cursor: pointer;
            box-sizing: border-box;
            text-align: center;
            border: 0;
            box-shadow: 0px 2px 3px rgb(92, 92, 92);

            &[disabled] {
                color: #c0c4cc;
                cursor: not-allowed;
            }

            &.active {
                cursor: not-allowed;
                background-color: #409eff;
                color: #fff;
            }

        }
    }
</style>